<template>
	<view class="cont" v-bind:style="{paddingTop:''+(statusBarHeight+49)+'px'}">
		<view class="cont-header fixedHeader">
			<!-- 这里是状态栏 -->
			<view class="status_bar" v-bind:style="{ height:''+statusBarHeight+'px'}"></view>
			<view class="title"><uniIcons class="back" @click='back' :type="'arrowleft'" size="16"/>{{navTitle}} <text v-if="isManager" class='right' @click="navigater('manage')">管理</text></view>
		</view>
		
		<view class="cont-body">
			<view class="search">
				<view class="search-item">
					<view class="search-icon">
						<uni-icons color="#999999" class="icon-search" type="search" size="18" />
					</view>
					<input type="text" value="" v-model="seartchText" placeholder="搜索" @input="getMoreSubUser('company', company, seartchText)" />
				</view>
				<view class="search-sub">
					<text>{{navTitle}}</text>
				</view>
			</view>
			
			<view class="department">
				<view class="department-list"><uni-collapse :accordion="true">
						<uni-collapse-item v-for="(list,i) in deptList" :key="i" :title="list.dept.fullname + '(' + list.dept.subnum +')'" :show-animation="true">
							<view class="order-list">
								<view v-for="(item,index) in list.rows" :key="index" :class="['order-list-cell',{'admin':item.is_manager==1}]" @click="navigater('details',item)">
									<view class="order-icon">
										<text v-if="item.is_manager==1">{{item.name}}</text>
										<text v-else>{{item.name}}</text>
									</view>
									<view class="order-text">
										<text>{{item.name}}</text>
										<text v-if="item.is_manager==1" class="uni-badge">管理员</text>
									</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
					
				</view>
			</view>
			
			<view class="invite">
				<navigator url="enterMobileAdd">
					<uni-icons color="#15B881" class="icon-filled" type="plus-filled" size="22" />
					<text>邀请成员加入</text>
				</navigator>
			</view>
			
			<!-- 管理员名单 -->
			<view class="order-list">
				<view v-for="(item,index) in subUser" :key="index" :class="['order-list-cell',{'admin':item.is_manager==1}]" @click="navigater('details',item)">
					<view class="order-icon">
						<text v-if="item.is_manager==1">{{item.NAME}}</text>
						<text v-else></text>
					</view>
					<view class="order-text">
						<text>{{item.NAME}}</text>
						<text v-if="item.is_manager==1" class="uni-badge">管理员</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import API from '../../common/api.js';
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	
	export default {
		components: {
			uniIcons,
			uniCollapse,
			uniCollapseItem
		},
		data: function () {
	        return {
				navTitle: "",
				isManager: true,
				statusBarHeight: 25,
				userid: 0,
				deptid: 0,
				company: 1,
				seartchText: "",
				subDept: [],
				subUser: [],
				deptList: []
	        }
	    },
		onLoad:function(){
			
			var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.statusBarHeight = statusBarHeight;
			this.company = uni.getStorageSync("company");
			this.userid = uni.getStorageSync("userid");
			this.deptid = uni.getStorageSync("deptid");
			
			this.getSubDept();
			this.isEmployee();
			
			// #ifdef APP-PLUS
			/* 隐藏凸起图标 */
			var icon = plus.nativeObj.View.getViewById("icon");
			setTimeout(function() {
				if(icon){icon.hide();}
			}, 100);
			// #endif
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			getSubDept(){
				var that = this;
				
				uni.request({
					url:API.getSubDept+"?company="+this.company+"&dept="+this.deptid,
					method:"GET",
					header:API.get_head(),
					success: (res) => {
						console.log("res==>", res);
						var subDept = res.data.data.subDept;
						that.subDept  = subDept;
						that.subUser = res.data.data.subUser;
						
						for (var i = 0; i<subDept.length; i++ ) {
							var data = {
								dept: subDept[i],
								rows: []
							}
							that.deptList.push(data);
							that.getMoreSubUser('dept',subDept[i].id,'', i);
						}
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				});
			},
			getMoreSubUser(type,para,username,len){
				var that = this;
				uni.request({
					url:API.getMoreSubUser,
					data:{
						type: type,
						para: para,
						username: username,
						// page: page,
						// rows: rows
					},
					method:"POST",
					header:API.get_head(),
					success: (res) => {
						console.log("getMoreSubUser==>", res);
						if(type == 'dept'){
							var rows = res.data.data.rows;
							that.deptList[len].rows = rows;
						}
						
						if(res.data.message != "success"){
							uni.showToast({
								title:res.data.message,
								icon:"none"
							});
						}
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				});
			},
			getSubDeptByDept(){
				var that = this;
				
				uni.request({
					url:API.getSubDeptByDept+"?deptid="+this.deptid,
					method:"GET",
					header:API.get_head(),
					success: (res) => {
						console.log("getSubDeptByDept-res==>", res);
						// that.subDept = res.data.data.subDept;
						// that.subUser = res.data.data.subUser;
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				});
			},
			isEmployee(){
				var that = this;
				
				uni.request({
					url:API.isEmployee+"?userid="+this.userid,
					method:"GET",
					header:API.get_head(),
					success: (res) => {
						// console.log("isEmployee==>", res);
						that.isManager = res.data.data.isManager;
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					}
				});
			},
			navigater(type,data){
				var thisUrl = "";
				
				switch(type) {
				     case 'manage':
						thisUrl = 'manage';
				        break;
				     case 'addUser':
				        thisUrl = 'enterMobileAdd';
				        break;
				     case 'details':
				        thisUrl = 'employeeDetails?details='+encodeURIComponent(JSON.stringify(data));
				        break;
				} 
				
				uni.navigateTo({
				    url: thisUrl
				});
			}
			
		}
	}
</script>

<style>
	@import "../../common/uni.css";
	
	page{
		height: 100%;
		background-color: #FFFFFF;
	}
	
	.fixedHeader.cont-header{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}
	.cont-header{
		background-color: #FFFFFF;
	}
	.cont-header .status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background:#FFFFFF;
	}
	.cont-header .title{
		height:98upx;
		text-align: center;
		font-size:28upx;
		line-height:98upx;
		color: #333333;
		position:relative;
		font-weight: bold;
	}
	.cont-header .title .right{color:#b5b5b5;font-size:30upx;position:absolute;right:20upx;top:0;}
	
	
	.search{
		padding: 0 30upx 20upx;
		background-color: #FFFFFF;
	}
	.search-item{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: #EAEDF2;
		border-radius: 60upx;
		height: 80upx;
		line-height: 80upx;
	}
	.search-icon{
		padding: 0 20upx;
		text-align: center;
		line-height: 80upx;
	}
	.search-item input{
		flex: 1;
		height: 80upx;
		line-height: 80upx;
	}
	.search-sub{
		color: #C5C5C5;
		margin-top: 30upx;
	}
	.department{
		padding-top: 20upx;
		background-color: #e5e5e5;
	}
	.department-list{
		padding-left: 20upx;
		background-color: #FFFFFF;
	}
	.department-list-cell,.order-list-cell{
		height: 100upx;
		line-height: 100upx;
		padding-right: 30upx;
		position: relative;
	}
	.department-list-cell:after{
		content: "";
		display: block;
		width: 100%;
		height: 2upx;
		background-color: #F9F9F9;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.department-list-cell text:first-child{
		color: #303030;
	}
	.department-list-cell text:nth-child(2){
		color: #C5C5C5;
		padding-left: 10upx;
	}
	.department-list-cell .icon-arrowright{
		float: right;
	}
	
	.department .uni-collapse-cell--open{
		background-color: #FFFFFF;
	}
	.department .uni-collapse-cell__title{
		padding-left: 0;
	}
	
	.invite{
		padding: 30upx 0;
		background-color: #e5e5e5;
	}
	.invite navigator{
		height: 80upx;
		line-height: 80upx;
		color: #303030;
		background-color: #FFFFFF;
	}
	.invite .icon-filled{
		margin: 0 50upx;
	}
	
	.order-list-cell{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0;
	}
	.order-list-cell:after{
		content: "";
		display: block;
		width: 100%;
		height: 2upx;
		background-color: #F9F9F9;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.order-list-cell:last-child:after{
		height: 0;
	}
	.order-list-cell .order-icon{
		width: 60upx;
		height: 60upx;
		line-height: 60upx;
		margin-top: 20upx;
		border-radius: 50%;
		text-align: center;
		color: #83868C;
		background-color: #CDE1F9;
		margin: 20upx 30upx;
		font-size: 18upx;
	}
	.order-list-cell.admin .order-icon{
		background-color: #3197F6;
		color: #FFFFFF;
	}
	.order-list-cell .order-text{
		flex: 1;
		line-height: 100upx;
		color: #303030;
	}
	.order-text .uni-badge{
		font-size: 18upx;
		border-radius: 50upx;
		border: 1px solid #74ABCA;
		color: #74ABCA;
		background-color: #FFFFFF;
		margin-left: 5upx;
	}
	
	.back{position:absolute;left: 20upx;}
	/* position:absolute;top:0;right: 0;padding: 64upx 32upx 64upx 46upx; */
</style>
